<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar title="" :fixed="true" placeholder>
      <template #left>
        <img src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <!-- 放大镜 一级 路由跳转$router.push 方法，如果函数体只有一句，可以直接写-->
      <!-- 标签里面的行内样式 px 需要自己手动转 rem -->
      <template #right>
        <van-icon name="search" size="0.48rem" @click="$router.push('/search')"></van-icon>
        <!-- <van-icon name="search" size="18" /> -->
      </template>
    </van-nav-bar>

    <!-- Tab 标签页 -->
    <!-- animated ：是否开启切换标签内容时的转场动画 -->
    <!-- sticky : 是否使用粘性定位布局 相当于flex布局 定位-->
    <!-- offset-top ：粘性定位布局下与顶部的最小距离，支持 px vw vh rem 单位，默认 px 手动转rem 保留6-8位-->
   <!--  v-model="active" 控制高亮 用户点击的tab 绑定---:name="obj.id"-->
    <van-tabs v-model="active" animated sticky offset-top="1.22667rem">
      <!-- <van-tab title="标签 1">内容 1</van-tab> -->
      <!--:name="obj.id" 父传子 channelId -->
      <van-tab
        v-for="obj in userChannelList"
        :key="obj.id"
        :title="obj.name"
        :name="obj.id"
      >
        <!-- 父active传子channelId ， 把channelId传给子 -->
        <article-list :channelId="active"></article-list>
      </van-tab>
    </van-tabs>

    <!-- 编辑 + 频道图标 -->
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="PlusClickFn"
    />
    <!-- 编辑频道-弹出层 --引组件-->
    <!-- 编辑频道  popup 与 反馈面板 样式冲突 加类名-->
    <van-popup v-model="show" class="channel_edit_wrap">
      <!--自定义关闭弹出层事件 closePopupEvent -->
      <!--添加频道-自定义事件 addChannelEvent -->
      <!--编辑频道组件里面--进入频道--（子传父）需要绑定高亮的频道 v-model="active" -->
      <ChannelEdit
        @closePE="closeFn"
        :userChannelList="userChannelList"
        @addChannelEvent="addChannelFn"
        @removeChannelEvent="removeChannelFn"
        v-model="active"
      ></ChannelEdit>
      <!-- 获取用户已选频道getUserChannelListAPI->子 -->
    </van-popup>

    <!-- 整个页面 共用一个反馈标签 -->
    <!-- 底部 点击articalItem-反馈按钮- x - 弹出动作面板-->
    <van-action-sheet
      v-model="$store.state.actionSheetShow"
      :actions="actionsArr"
      :cancel-text="cancelText"
      @select="onSelect"
      @cancel="onCancel"
      get-container="body"
      @click="actionCloseFn"
    />
  </div>
</template>

<script>
import ChannelEdit from './ChannelEdit.vue'
import { Toast } from 'vant'
import { mapState, mapMutations } from 'vuex'
import {
  getUserChannelListAPI,
  dislikeArticleAPI,
  reportArticleAPI,
  resetUserChannelAPI,
  deleteUserChannelAPI
} from '@/api'
import ArticleList from './ArticleList.vue'
export default {
  data () {
    return {
      active: 0, // 频道id --推荐列表 channelId
      userChannelList: [],
      // show: false  //v-model="show"
      // actions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }]
      // 提到 vuex 里定义

      actionsArr: [], // 放反馈面板数据
      cancelText: '取消',
      show: false // 弹出层
    }
  },
  computed: {
    ...mapState(['firstActions', 'secondActions', 'actionArtId'])
  },
  methods: {
    // 映射 方法
    ...mapMutations(['changeActionShowMutation']),
    // 点击选项时触发--判断点的那个选项
    async onSelect (item) {
      // console.log(item)
      if (item.name === '反馈垃圾内容') {
        // 点击反馈--切换二级反馈内容
        this.actionsArr = this.secondActions
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        const res = await dislikeArticleAPI(this.actionArtId)
        console.log(res)
        this.changeActionShowMutation(false) // 关闭反馈面板
        Toast.success('反馈成功')
      } else {
        // 进到二级选项---看文档--举报文章-接口
        const res = await reportArticleAPI({
          artId: this.actionArtId, // 拿到 选择 反馈 的 这个文章的ID
          type: item.value // 举报类型： 0-其他问题，1-标题夸张，2-低俗色情，3-错别字多，4-旧闻重复，5-广告软文，6-内容不实，7-涉嫌违法犯罪，8-侵权'
        })
        console.log(res)
        this.changeActionShowMutation(false) // 关闭反馈面板
        setTimeout(() => {
          this.actionsArr = this.firstActions
          Toast.success('恭喜你！反馈成功')
        }, 200)
      }
    },
    // 点击取消时触发 --弹出层不关（显示）-返回一级-按钮-取消选项
    onCancel () {
      if (this.cancelText === '返回') {
        this.changeActionShowMutation(true)
        this.actionsArr = this.firstActions
        this.cancelText = '取消'
      }
    },
    // 二级反馈面板关闭时
    actionCloseFn () {
      this.actionsArr = this.firstActions
    },
    // + 编辑点击事件-弹出层 组件出现
    PlusClickFn () {
      this.show = true
    },
    // 编辑频道-x -关闭弹出层 false
    closeFn (bool) {
      this.show = bool
    },
    // 添加频道--用户频道列表--接一下传过来的对象channelObj
    async addChannelFn (channelObj) {
      // 先调用一下接口-保证后台数据更新成功--前端在追加装入到数组里（数据一致性）
      this.userChannelList.push(channelObj) // userChannelList[{id:'',name:''}]
      const newArr = [] // 定义新数组，数组更新之后发给后台

      // 对象 不能直接使用userChannelList里面的对象---浅拷贝
      this.userChannelList.forEach((obj, index) => {
        if (obj.id === 0) {
          // 更新 时：不传【推荐频道】-不转换也不添加
        } else {
          const newObj = { ...obj } // 浅拷贝--定义新对象-内存地址与userChannelList里的obj 不同，所以就不会修改userChannelList
          delete newObj.name // newObj={id:'',name:''}
          newObj.seq = index + '' // 添加对象字段key 和 vulue 。 newObj={id:'',seq:''}
          newArr.push(newObj) // 频道对象追加到新数组里面
        }
      })
      // 更新之后-newArr 发给后台更新用户频道
      const res = await resetUserChannelAPI(newArr) // 传入数组对象 要求 ： newArr=[{id;'频道ID字符型',seq:'顺序序号字符型'}]
      console.log(res)
    },
    // 删除频道----点击时有的频道ID-> channelId
    async removeChannelFn (channelId) {
      const res = await deleteUserChannelAPI(channelId)
      console.log(res)

      // 调用接口--删除对应频道对象
      const index = this.userChannelList.findIndex(
        (obj) => obj.id === channelId
      )
      this.userChannelList.splice(index, 1) // 数组索引 a[0] === {}删除对应频道对象
    }
  },
  // 页面刷新
  async created () {
    try {
      const res = await getUserChannelListAPI()
      console.log(res)
      this.userChannelList = res.data.data.channels
    } catch (err) {
      // console.log(111)
      console.error(err)
    }
    // 默认反馈内容为一级
    this.actionsArr = this.firstActions
  },
  components: { ArticleList, ChannelEdit },
  // 测试相应拦截器----手动清token-页面离开-跳转页面-可能底部 再次登录之后反馈弹窗未关闭-
  destroyed () {
    this.changeActionShowMutation(false) // 关闭反馈面板
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__left img {
  width: 100px;
  height: 30px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
/* 频道编辑弹出层铺满屏幕 */
// .van-popup,
// .popup-container {
//   background-color: transparent;
//   height: 100%;
//   width: 100%;
//    background-color: white;
//  }
.channel_edit_wrap {
  height: 100%;
  width: 100%;
  background-color: white;
}
/*
.edit_wrap{
  width: 100%;
  height: 100%;
} */
</style>
